import React, {Component} from 'react';
import BetterScroll from "better-scroll";
import axios from "axios";

class App extends Component {

    state = {
        list: [],
        name: '艺'
    }

    componentDidMount() {
        axios.get("/test.json").then((response) => {
            this.setState({list: response.data.data.films})
        })
    }

    render() {
        return <div>
            <button onClick={() => this.setState({name: '张'})}>click</button>
            <span>{this.state.name}</span>
            <div id="wrapper" style={{backgroundColor: "yellow", height: "100px", overflow: "hidden"}}>
                <ul>
                    {this.state.list.map(item => {
                        return <li key={item.filmId}>{item.name}</li>
                    })}
                </ul>
            </div>
        </div>;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevState.list.length === 0) {
            // 保证只渲染一次  修改state后也不会再次渲染
            new BetterScroll("#wrapper")
        }
    }
}

export default App;